<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus" v-if="!disabled">新增</el-button>
        <el-table :data="pictureList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;">
            <el-table-column prop="uploaderName" label=" 上传人" show-overflow-tooltip sortable  min-width="90" align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" sortable min-width="120" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.path"
                        :preview-src-list="srcList">
                    </el-image>
                    </template>
            </el-table-column>

            <el-table-column prop="uploadTime" label="上传时间" sortable min-width="120" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="center" min-width="120" v-if="!disabled">
                <template slot-scope="scope">
                    <el-button @click="deleteDate(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialog.title" width="70%" top="40px"  center :visible.sync="dialog.isShow" :close-on-click-modal="false" :append-to-body='true'>
            <div class="uploadImg">
                <el-upload
                class="avatar-uploader"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess3"
                :before-upload="beforeAvatarUpload">
                <img v-if="picturePath" :src="picturePath" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">图片</i>
            </el-upload>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button  @click="addUpdate()" type="primary">新增</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import bloodKnowledgeApi from 'plugins/axios/bloodKnowledgeApi.js'
import baseApi from 'plugins/axios/baseApi.js'
export default {
    props:{
        epKnowledId:{
            type:Number
        },
        disabled:Boolean
    },
    data(){
        return {
            tableHeight:'600px',
            pictureList:[],/**原文献列表 */
            picturePath:"",
            dialog:{
                title:'',
                isShow:false
            },
            actionUrl:baseApi.imgUpload(),/**图片上传接口 */
            srcList:[]
        }
    },
    watch:{
    },
    mounted(){
        this.getPptList();
    },
    methods:{
         getPptList(){/**获取图片列表 */
            let self = this;
            self.srcList=[]
            bloodKnowledgeApi.pePictureList(self.epKnowledId).then(res=>{
                res.content.forEach(element => {
                    self.srcList.push(element.path);
                });
                self.pictureList=res.content;
            })
        },
        isShowDialog(){
            let self = this;
            self.dialog.isShow = true;
            self.dialog.title="新增图片"
            self.picturePath = '';
        },
        addUpdate(){
            let self = this;
            if(self.picturePath===''){
                self.$message.error('请选择图片');
                return
            }
            let postData={
                did:self.epKnowledId,
                path:self.picturePath
            }
            bloodKnowledgeApi.addPePicture(postData).then(res=>{
                self.dialog.isShow = false;
                self.$message.success('新增图片成功');
                self.getPptList();
            })
        },
        deleteDate(row){/**删除原文献 */
            let self = this;
            self.$confirm('确认是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    bloodKnowledgeApi.deletePePicture(row.id).then(res=>{
                        self.getPptList();
                        self.$message.success("图片删除成功！");
                    },error=>{
                        self.$message.error("图片删除失败！");
                    })
                }).catch(() => {
            });
        },
        beforeAvatarUpload(file){/**图片上传前图片大小验证*/
            const isJPG = file.type.substr(0,5) === 'image';
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                this.$message.error('只能上传图片!');
            }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M
        },
        handleAvatarSuccess3(response, file, fileList){
            this.picturePath = response;
        },
    }
}
</script>
<style scoped>
.uploadImg{
    width:200px;
    height:200px;
    overflow: hidden;
    padding:10px 24px;
    box-sizing: border-box;
    margin: 0 auto;
}
.uploadImg .avatar-uploader{
    height:100%;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.uploadImg .avatar-uploader:hover{
border-color: #409EFF;
}
.uploadImg .avatar-uploader .el-icon-plus::before{
    display: block;
    font-size: 24px;
    margin-top:67px;
}
.avatar {
    max-width: 100%;
    max-height:180px ;
    display: block;
    margin:auto;
  }
</style>
